<template>
    <div class="login">
        <span>&lt;</span>
        <div class="title">欢迎登录cdf海南免税</div>
        <div class="title1">未注册手机号验证后自动创建cdf海南免税账户</div>
        <div class="block">
            <input type="text" placeholder="请输入手机号" v-model="list1">
        </div>
        <div class="block">
            <input type="password" placeholder="请输入密码" v-model="list2">
        </div>
        <div class="hezi">
            <span>忘记密码？</span>
            <span  @click="fun">手机注册</span>
        </div>
        <div class="footer">
            <input type="checkbox" @click="change">
            <span>我已阅读并同意</span>
            <span>《用户服务协议》、</span>
            <span>《隐私政策》，</span>
            <span>并授权cdf海南免税使用该cdf海南免税账号信息进行统一管理。</span>
        </div>
        <div class="block">
            <button @click="denglu" :disabled="status">登录/注册</button>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
// import {login} from '../api/index.js'
import service from '../../../utils/service'
export default {
    data(){
        return {
            status:true,
            list1:'',
            list2:''
        }
    },
   
    methods:{
        denglu(){
            service({
                url:"http://118.178.238.19:3001/api/user/login",
                method:"post",
                data: {'loginname':this.list1,'password':this.list2}
            }).then((res)=>{
                console.log(res.data);
            if(res.data.code==200) {
                localStorage.setItem('token',res.data.token)
                // localStorage.setItem('id',res.data.userinfo.id)
                localStorage.setItem('phone',res.data.userinfo.phone)
                Dialog.alert({
                    title: '欢迎进入cdf首页',
                    message: '登录成功',
                    }).then(() => {
                        this.$router.push('/Homepage')
                });
            } else {
                Dialog.alert({
                    title: '登录失败',
                    message: '用户名或密码错误',
                    }).then(() => {
                });
            }
            })
        },
        change() {
            this.status = !this.status
        },
         fun(){
            //方法1:
            this.$router.push("/Register");
        }
        
    }
}
</script>

<style scoped>
.leftlogin{
    position: fixed;
    left:10px;
    top:10px;
}
    .login {
        padding: 20px;
        height: 667px;
        /* text-align: center; */
    }
    .title {
        font-size: 24px;
        font-weight: 300;
        margin-top: 50px;
        margin-bottom: 10px;
    }
    .title1{
        font-size: 12px;
        color: rgba(165, 157, 157, 0.708);
    }
    .block {
        width: 100%;
        height: 40px;
        margin-top: 20px;
        font-size: 14px;
        color: white;
    }
    .block input {
        width: 100%;
        height: 40px;
        border: none;
        border-bottom: 1px solid gainsboro;
    }
    button{
        background-color: gainsboro;
        width: 100%;
        height: 40px;
        border-radius: 10px;
        border: none;

    }
    .hezi {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    .hezi span {
        color: red;
        font-size: 12px;
    }
    .footer {
        width: 100%;
        /* position: fixed;
        bottom: 30px; */
    }
    .footer input {
        width: 15px;
        height: 15px;
        /* line-height: 1px; */
        border-radius:9px;
    }
    .footer span {
        font-size: 12px;
    }
    .footer span:nth-child(3){
        color: red;
    }
    .footer span:nth-child(4){
        color: red;
    }
</style>